<template>
  <a-modal
    title="批量导入"
    :width="600"
    :visible="visible"
    :confirmLoading="uploading"
    @cancel="handleClose">

    <div style="margin: 0px 0px 5px 1px" v-if="verifyCodeNum">
      <span style="display: inline-block;height: 32px;line-height: 32px;vertical-align: middle;font-weight: bold">数据导入规则：</span>
      <span style="display: inline-block;height: 32px;margin-left: 6px">
        <a-radio-group v-model="verifyCodeNumType">
        <a-radio :value="1">跳过相同款号</a-radio>
        <a-radio :value="2">覆盖相同款号</a-radio>
      </a-radio-group>
      </span>
    </div>

    <a-upload
      name="file"
      :multiple="multi"
      accept=".xls,.xlsx"
      :fileList="fileList"
      :remove="handleRemove"
      :beforeUpload="beforeUpload">
      <a-button style="margin-left: 6px">
        <a-icon type="upload" />
        请上传要导入的EXCEL文件
      </a-button>
    </a-upload>

    <div style="margin: 5px 0px 5px 1px" v-if="template">
      <span style="display: inline-block;height: 32px;margin-left: 6px">
          <a-button type="primary" icon="download">点击下载{{templateName}}</a-button>
      </span>
    </div>

    <template slot="footer">
      <a-button @click="handleClose">关闭</a-button>
      <a-button
        type="primary"
        @click="handleImport"
        :disabled="fileList.length === 0"
        :loading="uploading">
        {{ uploading ? '上传中...' : '开始上传' }}
      </a-button>
    </template>

  </a-modal>
</template>

<script>
  import { postAction } from '@/api/manage'
  export default {
    name: 'StyleInfoImportModal',
    props:{
      url:{
        type: String,
        default: '',
        required: false
      },
      //款号校验规则
      verifyCodeNum:{
        type: Boolean,
        default: false,
        required: false
      },
      //是否显示导入模板
      template:{
        type: Boolean,
        default: false,
        required: false
      },
      //模板名称
      templateName:{
        type: String,
        default: '导入模板',
        required: false
      },
      //是否允许多文件上传
      multi:{
        type: Boolean,
        default: true,
        required: false
      },
    },
    data(){
      return {
        visible:false,
        uploading:false,
        fileList:[],
        uploadAction:'',
        verifyCodeNumType: 1
      }
    },
    watch: {
      url (val) {
        if(val){
         this.uploadAction = window._CONFIG['domianURL']+val
        }
      }
    },
    created () {
      this.uploadAction = window._CONFIG['domianURL']+this.url
    },

    methods:{
      handleClose(){
        this.visible = false
      },
      show(arg){
        this.fileList = []
        this.uploading = false
        this.visible = true
        this.verifyCodeNumType = 1
      },
      handleRemove(file) {
        const index = this.fileList.indexOf(file);
        const newFileList = this.fileList.slice();
        newFileList.splice(index, 1);
        this.fileList = newFileList
      },
      beforeUpload(file) {
        this.fileList = [...this.fileList, file]
        return false;
      },
      handleImport() {
        const { fileList } = this;
        const formData = new FormData();
        if(this.verifyCodeNum == true){
          formData.append('verifyCodeNumType',this.verifyCodeNumType);
        }
        fileList.forEach((file) => {
          formData.append('files[]', file);
        });
        this.uploading = true
        postAction(this.uploadAction, formData).then((res) => {
          this.uploading = false
          if(res.success){
            if(res.code == 201){
              this.errorTip(res.message, res.result)
            }else{
              this.$message.success(res.message)
            }
            this.visible=false
            this.$emit('ok')
          }else{
            this.$message.warning(res.message)
          }
        })
      },
      // 错误信息提示
      errorTip(tipMessage, fileUrl) {
        const h = this.$createElement;
        let href = window._CONFIG['domianURL'] + fileUrl
        this.$warning({
          title: '导入成功,但是有错误数据!',
          content: h('div', {}, [
            h('div', tipMessage),
            h('span', '具体详情请 '),
            h('a', {
              attrs: {
                href: href,
                target: '_blank'
              },
            },'点击下载'),
          ]),
          onOk() {},
        });
      },

    }
  }
</script>

<style scoped>

</style>